<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>收支情况</span>
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label prop="inout" width="180">
          <template slot-scope="scope">
            <i class="el-icon-circle-plus-outline" v-if="scope.row.inout === '收入'"></i>
            <i class="el-icon-remove-outline" v-else></i>
            <span style="margin-left: 10px">{{ scope.row.inout }}</span>
          </template>
        </el-table-column>
        <el-table-column label="近一周" prop="week" width="180"></el-table-column>
        <el-table-column label="本月" prop="month" width="180"></el-table-column>
        <el-table-column label="本年" prop="year" width="180"></el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card">
      <span>全部总资产：</span>
      <hr />
      <br />
      <p>总收入：{{ allIn }}</p>
      <br />
      <p>总支出：{{ allOut }}</p>
      <br />
      <p>结算：{{allIn-allOut}}</p>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          inout: "收入",
          week: 0,
          month: 0,
          year: 0
        },
        {
          inout: "支出",
          week: 0,
          month: 0,
          year: 0
        }
      ],
      // 获取的当前账号的所有记录保存
      record: {},
      // 今天的日期
      nowDate: "",
      // 进一个星期的起始
      startWeek: "",
      allIn: 0,
      allOut: 0
    };
  },
  created() {
    this.firstIn();
  },
  methods: {
    // 格式化日期
    dateForm(date) {
      let d = new Date(date);
      d.setDate(d.getDate() + 0);
      let m = d.getMonth() + 1;
      return d.getFullYear() + "-" + m + "-" + d.getDate();
    },
    // 初始化数据
    async firstIn() {
      // 得到今天的日期，近一周的起始日期
      let date = new Date();
      this.nowDate = this.dateForm(date);
      window.sessionStorage.setItem("nowDate", this.nowDate);
      this.startWeek = this.dateForm(
        new Date(date.setDate(date.getDate() - 7))
      );
      // 获取当前账号全部记录
      const result = await this.$http.get("record", {
        params: { telephone: window.sessionStorage.getItem("telephone") }
      });
      let weekIn = 0,
        weekOut = 0;
      let monthIn = 0,
        monthOut = 0;
      let yearIn = 0,
        yearOut = 0;
      let flag = true;
      let lastDate = new Date(new Date().setDate(new Date().getDate() - 3));
      // 遍历获取到的数据，按时间日期渲染
      result.data.data.result.recordset.forEach(item => {
        var days = new Date() - new Date(item.date).getTime();
        var day = parseInt(days / (1000 * 60 * 60 * 24));
        if (day <= 3) {
          flag = false;
        }
        if (item.expend > 0) {
          this.allIn += item.expend;
        } else {
          this.allOut += Math.abs(item.expend);
        }
        if (new Date(item.date).getMonth() === new Date().getMonth()) {
          if (item.expend > 0) {
            monthIn += item.expend;
          } else {
            monthOut += Math.abs(item.expend);
          }
        }
        if (new Date(item.date).getFullYear() === new Date().getFullYear()) {
          if (item.expend > 0) {
            yearIn += item.expend;
          } else {
            yearOut += Math.abs(item.expend);
          }
        }
        item.date = this.dateForm(item.date);
        if (item.date >= this.startWeek) {
          if (item.expend > 0) {
            weekIn += item.expend;
          } else {
            weekOut += Math.abs(item.expend);
          }
        }

        this.tableData[0].week = weekIn;
        this.tableData[0].month = monthIn;
        this.tableData[0].year = yearIn;
        this.tableData[1].week = weekOut;
        this.tableData[1].month = monthOut;
        this.tableData[1].year = yearOut;
      });
      this.record = result.data.data.result.recordset;
      this.$store.commit("setRecord", this.record);
      if (flag && this.$store.state.flag) {
        this.$store.commit("setFlag");
        this.$notify.info({
          title: "消息",
          message: "您已超过三天没有记账了，建议您尽快记账"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box-card {
  width: 80%;
  margin: 20px auto;
}
</style>